<style type="text/css">
.global_form_popup #image-wrapper{
    max-width: 300px;
    float: left;
    margin-right: 10px;    
}
.global_form_popup #upload{
    margin-top: 23px;    
}
#preview_image img{
    max-height: 400px;
    max-width: 450px;     
}
#preview_block{
    background: no-repeat scroll center center;
    float: left;  
    margin-left: 10px;
    width: 100px;
    height: 100px;
    border: 1px solid #C6C8C6;
    border-radius: 8px 8px 8px 8px;
    z-index: 99;
}
.preview-wrapper{
    padding-left: 115px;
    padding-top: 100px;
}
.fb_btn {background-color: #5B74A8;background-image: url("~/application/modules/Webmix/externals/images/fb_btn.png");; background-repeat: no-repeat;border-color: #29447E #29447E #1A356E;-moz-border-bottom-colors: none;-moz-border-image: none;-moz-border-left-colors: none;-moz-border-right-colors: none;-moz-border-top-colors: none;border-style: solid;border-width: 1px;box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);color: #FFF;cursor: pointer;display: inline-block;font-size: 11px;
font-weight: bold;line-height: normal !important;padding: 4px 6px;text-align: center;text-decoration: none;vertical-align: top;white-space: nowrap;}
a.fb_btn, a.fb_btn:hover {text-decoration: none;}
button.fb_confirm, a.fb_confirm {background-position: 0 -294px; color: #FFF !important;}
</style>

<?php $this->headScript()
        ->appendFile($this->layout()->staticBaseUrl . 'application/modules/Webmix/externals/scripts/File.Upload.js')
?>

<div style="width: 350px; height: 215px; padding: 20px;">
    <?php echo $this->form->setAttrib('class', 'global_form_popup')->render($this); ?>
    <div id='preview_image'><img /></div>
    <div class="preview-wrapper" id="preview-wrapper">
            <div id="preview_block"></div>
    </div>
</div>


<script type="text/javascript">
    
    function submitImage(){
        var file_id = $('file_id').get('value');
        var file_url = $('file_url').get('value');
        <?php if($this->type == 'edit'):?>  
            var href = en4.core.baseUrl + 'admin/webmix/company/edit/company/<?php echo $this->company?>/photo/'+file_id+'/format/smoothbox';
            this.location.href = href;
        <?php else:?>    
            parent.setPhoto(file_url,file_id);
            parent.Smoothbox.close();
        <?php endif?>        
    }
    
    window.addEvent('domready', function(){
    	$("image").addEvent('change', function(){
    	    //$('preview-wrapper').setStyles({'display': 'none'});
            //$('preview_image').setStyles({'display': 'block'});
    		var upload = new File.Upload({
    			url: en4.core.baseUrl + 'webmix/company/preview/format/json',
    			images: ['image'],
                onRequest: function(){
                    $('preview_image').set('html', '<img src="'+ en4.core.baseUrl + 'application/modules/Core/externals/images/loading.gif' +'">');
                  },
    			onComplete: function(response){   			 
                    response = JSON.decode(response);
    				//$('preview_image').getElement('img').set('src',response.preview_url);
                    $('file_id').set('value',response.file_id);
                    $('file_url').set('value',response.file_url);
                    $('preview_block').setStyle('background-image','url('+response.file_url+')');

    			}
    		});		
    	   upload.send();      
    	});
    });    
    
    function back(){
        var href = en4.core.baseUrl + 'admin/webmix/company/edit/company/<?php echo $this->company?>/format/smoothbox';
        this.location.href = href;
    }            
//    function previewImage(){
//        $('preview-wrapper').setStyles({'display': 'block'});
//        $('preview_image').setStyles({'display': 'none'});
//    }          
</script>
<button href="javascript:void(0)" style="float: right; margin: 5px 10px 5px 5px;" onclick="parent.Smoothbox.close();"><?php echo $this->translate('Cancel');?></button>
<?php if ($this->type == 'edit'):?>    
<button href="javascript:void(0)" style="float: right; margin: 5px 10px 5px 5px;" onclick="back();"><?php echo $this->translate('Back');?></button>
<?php endif;?>